$sidebar-width: 200px;
$sidebar-sm-width: 75px;
$sidebar-color: rgba(90%, 90%, 90%, 100%);

.sidebar {
	@media (min-width: $screen-md-min) {
		width: $sidebar-width;
	}

	@media (max-width: $screen-sm-max) {
		width: $sidebar-sm-width;

		.user-widget {
			img {
				width: 32px;
				height: 32px;
			}
		}
	}

	.user-widget {
		margin-top: 85px;

		img {
			width: 50px;
			height: 50px;
			border: solid 2px $sidebar-header-bg;
		}
	}

	.header {
		height: 50px;
		font-family: ProximaNovaCondSemi;
		background-color: $sidebar-header-bg;
		padding: 15px 15px 13px 15px;
		font-size: 17px;
		position: fixed;
		width: 200px;

		img {
			vertical-align: top;
		}
	}

	height: 100%;
	width: $sidebar-width;
	padding: 0px;
	color: white !important;
	background-color: $sidebar-bg;
	position: fixed;
	z-index: 11;

	.progress {
		margin-bottom: 0 !important;
	}
	li {
		font-family: ProximaNova;
		font-size: 14px;
	}
	ul .active {
		background-color: $sidebar-highlight !important;

		a {
			background-color: $sidebar-highlight !important;
			color: white !important;
		}
	}

	a {
		color: white !important;

		&:hover {
			background-color: $sidebar-highlight !important;
			color: white !important;
		}
	}
}
